<template>
	<page-layout>
		<a-row :gutter="[10, 10]">
			<a-form :model="baseFields.data" :labelCol="{ span: 9 }">
				<a-col :span="24">
					<a-card title="Basic Information">
						<template #extra>
							<a-button type="primary" class="ml-5" @click="onSubmit()">保存</a-button>
						</template>
						<a-row>
							<a-col :span="8">
								<a-form-item label="照片">
									<a-upload name="professorPicture" list-type="picture-card" class="avatar-uploader"
										:show-upload-list="false" action="#" :before-upload="beforeUpload">
										<a-spin :spinning="state.uploadImgLoading">
											<img width="100" v-if="baseFields.data.coverPicture"
												:src="baseFields.data.coverPicture" alt="avatar" />
											<div v-else>
												<plus-outlined></plus-outlined>
												<div class="ant-upload-text">上传照片</div>
											</div>
										</a-spin>
									</a-upload>
									<div class="upload-title">支持jpg格式</div>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="8">
								<a-form-item label="Name">
									<a-input v-model:value="baseFields.data.name" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="ID number">
									<a-input v-model:value="baseFields.data.idCar" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Surname">
									<a-input v-model:value="baseFields.data.surname" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="First name">
									<a-input v-model:value="baseFields.data.firstName" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Middle initial">
									<a-input v-model:value="baseFields.data.middleInitial" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Application date and time">
									<a-date-picker style="width:100%" v-model:value="baseFields.data.applicationDate"
										format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="年月日" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Hire date">
									<a-date-picker style="width:100%" v-model:value="baseFields.data.hireDate"
										format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="年月日" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Faculty Group">
									<a-input v-model:value="baseFields.data.facultyGroup" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Email address">
									<a-input v-model:value="baseFields.data.emailAddress" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Alt email">
									<a-input v-model:value="baseFields.data.altEmail" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Street address">
									<a-input v-model:value="baseFields.data.streetAddress" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Address line 2">
									<a-input v-model:value="baseFields.data.addressLine2" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="City">
									<a-input v-model:value="baseFields.data.city" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="State / Province">
									<a-input v-model:value="baseFields.data.stateProvince" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="ZIP / Postal code">
									<a-input v-model:value="baseFields.data.zipPostalCode" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Country">
									<a-input v-model:value="baseFields.data.country" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Citizenship">
									<a-input v-model:value="baseFields.data.citizenship" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="Phone number">
									<a-input v-model:value="baseFields.data.phoneNumbe" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="任职学校" ref="serviceSchool" name="serviceSchool">
									<a-input v-model:value="baseFields.data.serviceSchool">
										<template #addonAfter>
											<div class="primary-color cursor-pointer"
												@click="openDialog('universityVisible')">
												选择
											</div>
										</template>
									</a-input>
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item label="简介">
									<a-input v-model:value="baseFields.data.briefIntroduction"
										placeholder="用于小程序展示教授信息" />
								</a-form-item>
							</a-col>
						</a-row>
					</a-card>
				</a-col>
				<a-col :span="24">
					<a-card title="Working Experience">
						<a-row>
							<a-col :span="13">
								<!-- 授权在美国工作？ -->
								<a-form-item>Authortzed to work in the United States?</a-form-item>
								<a-form-item>
									<a-select v-model:value="baseFields.data.authorizedWorkYesno">
										<a-select-option :value="1">YES</a-select-option>
										<a-select-option :value="2">NO</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- 以前为莱恩教育工作过吗？ -->
								<a-form-item>Worked for Lion Education previously?</a-form-item>
								<a-form-item>
									<a-select v-model:value="baseFields.data.previouslyWorkYesno">
										<a-select-option :value="1">YES</a-select-option>
										<a-select-option :value="2">NO</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<!-- 简要描述您在狮子教育工作的时间和身份 -->
								<a-form-item>Briefly describe when and in what capacity you have worked for Lion
									Education</a-form-item>
								<a-form-item>
									<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
										v-model:value="baseFields.data.capacityDesc" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- 开始供应日期 -->
								<a-form-item>Starting date of availability</a-form-item>
								<a-form-item>
									<a-date-picker style="width:100%"
										v-model:value="baseFields.data.startingAvailabilityDate" format="YYYY-MM-DD"
										value-format="YYYY-MM-DD" placeholder="年月日" />
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<a-form-item>Last date of availability (if relevant to the position you are applying
									for)</a-form-item>
								<a-form-item>
									<a-date-picker style="width:100%"
										v-model:value="baseFields.data.lastAvailabilityDate" format="YYYY-MM-DD"
										value-format="YYYY-MM-DD" placeholder="年月日" />
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<!-- 申请职位 -->
								<a-form-item>Position you are applying for</a-form-item>
								<a-form-item>
									<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
										v-model:value="baseFields.data.applyingPosition" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- 你有教国际学生的经验吗？ -->
								<a-form-item>Do you have experience teaching international students?</a-form-item>
								<a-form-item>
									<a-select v-model:value="baseFields.data.teachingInternationalYesno">
										<a-select-option :value="1">YES</a-select-option>
										<a-select-option :value="2">NO</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<!-- <a-col :span="24">
									<a-form-item>
										<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
											v-model:value="baseFields.data.otherforeignExperienceDesc" placeholder="Briefly describe your experience teaching international students." />
									</a-form-item>
								</a-col> -->
							<!-- <a-col :span="24">
									<a-form-item label="Do you have experience teaching in China?">
										<a-select v-model:value="baseFields.data.acceleratedYesno">
											<a-select-option :value="1">YES</a-select-option>
											<a-select-option :value="2">NO</a-select-option>
										</a-select>
									</a-form-item>
								</a-col> -->
							<a-col :span="24">
								<!-- 简要描述你在中国的教学经验。 -->
								<a-form-item>Briefly describe your experience teaching in China.</a-form-item>
								<a-form-item>
									<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
										v-model:value="baseFields.data.chinaExprienceDescribe" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- 你有在其他国家教书的经验吗 -->
								<a-form-item>Do you have experience teaching in any other foreign country or countries?
								</a-form-item>
								<a-form-item>
									<a-select v-model:value="baseFields.data.otherforeignExperienceYesno">
										<a-select-option :value="1">YES</a-select-option>
										<a-select-option :value="2">NO</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<!-- 如果你的答案与你教国际学生的经验相同，请注明。否则，请简要描述您在任何其他国家的教学经验。 -->
								<a-form-item>If your answer is the same as your experience teaching international
									students, please indicate that. Otherwise, briefly describe your experience teaching
									in any other foreign country or countries.</a-form-item>
								<a-form-item>
									<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
										v-model:value="baseFields.data.otherforeignExperienceDesc" placeholder="请输入" />
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- 你是否有以速成形式教授课程的经验？ -->
								<a-form-item>Do you have experience teaching courses in an accelerated format?
								</a-form-item>
								<a-form-item>
									<a-select v-model:value="baseFields.data.acceleratedYesno">
										<a-select-option :value="1">YES</a-select-option>
										<a-select-option :value="2">NO</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<!-- 简要描述您在加速课程教学中的经验 -->
								<a-form-item>Briefly describe your experience teaching courses in an accelerated format.
								</a-form-item>
								<a-form-item>
									<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
										v-model:value="baseFields.data.acceleratedDesc" placeholder="请输入" />
								</a-form-item>
							</a-col>
						</a-row>
					</a-card>
				</a-col>
				<a-col :span="24">
					<a-card title="Education Background">
						<a-row>
							<a-col :span="24">
								<!-- 最高教育水平 -->
								<a-form-item>Highest level of education</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.highestLevelEducation" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 最高学历证书名称 -->
								<a-form-item>Title of credential of highest level of education.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.credentialHighest" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 最高教育水平的学科/领域： -->
								<a-form-item>Discipline/field of highest level of education.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.disiplineHighest" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 第一个附加凭证的类型 -->
								<a-form-item>Type of first additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.additionalCredentialDesc" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 颁发第一个附加证书的机构 -->
								<a-form-item>Awarding institution of first additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.addirionalCredentialDesc" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 第一个附加凭证的标题 -->
								<a-form-item>Title of first additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.additionalCredentialTitle" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 第一个附加凭证的学科/领域 -->
								<a-form-item>Discipline/field of first additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.additionalCredentialDiscipline" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 第二个附加凭证的类型 -->
								<a-form-item>Type of second additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.secondAdditionalCredentialTypedesc"
									placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 颁发第二个附加证书的机构 -->
								<a-form-item>Awarding institution of second additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.secondAdditionalCredentialDesc" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 第二个附加凭证的标题 -->
								<a-form-item>Title of second additional credential.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.econdAdditionalCredentialTitle" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 授权Lion联系主管 -->
								<a-form-item>Lion authorized to contact supervisors?</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.authonrizedSupervisorsLion" placeholder="请输入" />
							</a-col>
						</a-row>
					</a-card>
				</a-col>
				<a-col :span="24">
					<!-- 就业背景 -->
					<a-card title="Employment Background">
						<a-row v-for="(item, index) in baseFields.data.professorEmploymentBackgroud" :key="index">
							<a-col :span="24">
								<!-- 雇员 -->
								<a-form-item>empoyer</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.empoyer"
									placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 雇员地址 -->
								<a-form-item>Employer location</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.empoyerLocation"
									placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 员工电话号码 -->
								<a-form-item>Employer phone number (including international code)</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="item.empoyerPhoneNumber" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 职位名称 -->
								<a-form-item>Job title</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.jobTitle"
									placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 工作职责和成就 -->
								<a-form-item>Job responsibilities and accomplishments</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="item.jobResponsibilities" placeholder="请输入" />
							</a-col>
							<a-col :span="13">
								<!-- 开始受雇日期 -->
								<a-form-item>Starting date of employment</a-form-item>
								<a-form-item>
									<a-date-picker style="width:100%" v-model:value="item.startdateEmployment"
										format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="年月日" />
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- Currently employed by this employer -->
								<a-form-item>Currently employed by this employer?</a-form-item>
								<a-form-item>
									<a-select v-model:value="item.currentlyEmployed">
										<a-select-option :value="1">YES</a-select-option>
										<a-select-option :value="2">NO</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="13">
								<!-- 终止受雇日期 -->
								<a-form-item>Ending date of employment</a-form-item>
								<a-form-item>
									<a-date-picker style="width:100%" v-model:value="item.enddateEmployment"
										format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="年月日" />
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<!-- 主管姓名和职务 -->
								<a-form-item>Supervisor name and title.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorName"
									placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 主管姓名-全名 -->
								<a-form-item>Supervisor name Reference - Full name.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="item.supervisorFullname" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 主管名称参考-组织 -->
								<a-form-item>Supervisor name Reference - Organization.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="item.supervisorOrganization" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 主管姓名参考-与您的关系 -->
								<a-form-item>Supervisor name Reference - Relationship to you</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="item.supervisorOrganizationRelationship" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 主管姓名参考-电子邮件地址 -->
								<a-form-item>Supervisor name Reference - Email address</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="item.supervisorAddress" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 主管姓名参考-电话号码（包括国际代码） -->
								<a-form-item>Supervisor name Reference - Phone number (including international code)
								</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorPhone"
									placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<a-form-item>
									<a-button v-if="index === 0" type="primary" class="mr-20" @click="addCourseItem">添加
									</a-button>
									<a-button v-else type="danger" @click="deleteCourseItem(index)">删除</a-button>
								</a-form-item>
							</a-col>
						</a-row>
					</a-card>
				</a-col>
				<a-col :span="24">
					<a-card title="others">
						<a-row>
							<a-col :span="24">
								<!-- 非拉丁字母的名称（例如，对于中文名称，请在此处输入中文字符。） -->
								<a-form-item>Name in non-Latin script (For example, for Chinese names, enter the Chinese
									characters here.)</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.nonLationDesc" placeholder="请输入" />
							</a-col>
							<a-col :span="24">
								<!-- 以前与Lion一起教授的课程 -->
								<a-form-item>Courses previously taught with Lion.</a-form-item>
								<a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
									v-model:value="baseFields.data.coursesPreviouslyLion" placeholder="请输入" />
							</a-col>
						</a-row>
					</a-card>
				</a-col>
			</a-form>
		</a-row>
		<school :visible="formState.universityVisible" @close="closeDialog" @submitSchool="selectUniversity" />
	</page-layout>
</template>
<script>
	import { defineComponent, reactive, toRaw, createVNode, onMounted, ref, onActivated } from "vue";
	import school from './school.vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import {
		selectById,
		update
	} from "@/api/module/professor";
	import {
		message
	} from 'ant-design-vue';
	import {
		upload
	} from "@/api/module/oss"
	import moment from 'moment'
	import mixin from '@/mixins'
	export default defineComponent({
		name: "",
		components: {
			school
		},
		setup() {
			const { returnRoute } = mixin.setup()
			const router = useRouter();
			const route = useRoute();
			const formState = reactive({
				universityVisible: false,
			})
			const baseFields = reactive({
				data: {},
				// professorEmploymentBackgroud: [],
			})
			onActivated(async () => {
				let res = await selectById({
					id: route.query.id
				})
				baseFields.data = res.data;
				if (res.data.professorEmploymentBackgroud.length == 0) {
					addCourseItem();
				}
				console.log(baseFields)
			})
			const addCourseItem = () => baseFields.data.professorEmploymentBackgroud.push({
				empoyer: '',
				empoyerLocation: '',
				empoyerPhoneNumber: '',
				jobTitle: '',
				jobResponsibilities: '',
				startdateEmployment: '',
				currentlyEmployed: '',
				enddateEmployment: '',
				supervisorName: '',
				supervisorFullname: '',
				supervisorOrganization: '',
				supervisorOrganizationRelationship: '',
				supervisorAddress: '',
				supervisorPhone: ''
			})
			const deleteCourseItem = sendIndex => baseFields.data.professorEmploymentBackgroud.splice(sendIndex, 1)
			const onSubmit = () => {
				update({
					...toRaw(baseFields.data)
				}).then(res => {
					console.log(res)
					// if (res.code === 200) {
					//   message.success('新增成功');
					//   router.push('/university/message-manage-list')
					// }
					returnRoute()
					// router.push('/university/professor-manage')
				})
			};
			const gotoPage = (msg) => {
				router.push('/university/professor-manage/' + msg)
			}
			// 弹出选择学校操作
			const openDialog = (value) => {
				formState[value] = true
			}
			const closeDialog = (value) => {
				formState[value] = false
			}
			const selectUniversity = (value) => {
				formState["universityVisible"] = false;
				if (value) {
					baseFields.data.serviceSchool = value.id
					// showdata.serviceSchoolname =value.schoolEnName
				}
			}
			const state = reactive({
				uploadImgLoading: false
			})
			const fileList = ref([]);
			const loading = ref(false);
			const imageUrl = ref('');
			const beforeUpload = file => {
				if (!state.uploadImgLoading) {
					const Files = new FormData()
					Files.append('file', file)
					state.uploadImgLoading = true
					upload(Files).then(res => {
						if (res.code === 500) {
							message.error({
								content: res.msg || '上传图片失败'
							})
						} else {
							const {
								path: url,
								id: fileId,
								remark,
								name
							} = res.data
							formState.coverPicture = url
						}
						state.uploadImgLoading = false
					}).catch(() => state.uploadImgLoading = false)
				}
				return false
			};
			return {
				openDialog,
				closeDialog,
				selectUniversity,
				baseFields,
				gotoPage,
				formState,
				addCourseItem,
				deleteCourseItem,
				onSubmit,
				state,
				fileList,
				loading,
				imageUrl,
				beforeUpload,
			}
		}
	})
</script>
<style scoped>
	.ant-form-item {
		margin-bottom: 0x;
		margin: 10px 0;
	}
</style>
